// 默认分类配置
const DEFAULT_CATEGORIES = {
  '新闻网站': ['news', 'zhihu', 'weibo', '163.com', 'sina.com.cn', 'qq.com', 'ifeng.com'],
  '社交媒体': ['facebook', 'twitter', 'instagram', 'linkedin', 'douban'],
  '视频平台': ['youtube', 'bilibili', 'youku', 'tiktok'],
  '学习资源': ['github', 'wikipedia', 'coursera', 'edX', 'baidu.com'],
  '购物网站': ['taobao', 'tmall', 'jd', 'amazon', 'pdd'],
  '工具网站': ['tool', 'convert', 'calculator', 'validator'],
  '其他网站': []
};

// 当前配置对象
let currentCategories = {};

// 初始化配置页面
async function initConfig() {
  // 加载保存的配置或使用默认配置
  currentCategories = await loadCategories();
  renderCategories();
  
  // 添加事件监听器
  document.getElementById('add-category').addEventListener('click', addNewCategory);
  document.getElementById('saveBtn').addEventListener('click', saveConfig);
  document.getElementById('resetBtn').addEventListener('click', resetToDefault);
}

// 从Chrome存储加载分类配置
async function loadCategories() {
  return new Promise((resolve) => {
    chrome.storage.local.get('bookmarkCategories', (result) => {
      // 如果没有保存的配置，返回默认配置的深拷贝
      if (!result.bookmarkCategories || Object.keys(result.bookmarkCategories).length === 0) {
        resolve(JSON.parse(JSON.stringify(DEFAULT_CATEGORIES)));
      } else {
        resolve(result.bookmarkCategories);
      }
    });
  });
}

// 渲染所有分类
function renderCategories() {
  const container = document.getElementById('categories-container');
  container.innerHTML = '';
  
  // 按分类名称排序
  const sortedCategoryKeys = Object.keys(currentCategories).sort((a, b) => {
    // '其他网站'始终放在最后
    if (a === '其他网站') return 1;
    if (b === '其他网站') return -1;
    return a.localeCompare(b);
  });
  
  sortedCategoryKeys.forEach(categoryName => {
    const categoryItem = createCategoryItem(categoryName, currentCategories[categoryName]);
    container.appendChild(categoryItem);
  });
}

// 创建分类项DOM元素
function createCategoryItem(categoryName, keywords) {
  const categoryDiv = document.createElement('div');
  categoryDiv.className = 'category-item';
  categoryDiv.setAttribute('data-category', categoryName);
  
  // 分类头部
  const headerDiv = document.createElement('div');
  headerDiv.className = 'category-header';
  
  // 分类标题
  const titleInput = document.createElement('input');
  titleInput.type = 'text';
  titleInput.className = 'category-title-input';
  titleInput.value = categoryName;
  titleInput.addEventListener('change', updateCategoryName);
  
  // 删除分类按钮
  const deleteButton = document.createElement('button');
  deleteButton.className = 'remove-category-btn';
  deleteButton.textContent = '删除分类';
  deleteButton.addEventListener('click', () => {
    // '其他网站'不能删除
    if (categoryName === '其他网站') {
      showMessage('"其他网站"分类不能删除', 'error');
      return;
    }
    delete currentCategories[categoryName];
    renderCategories();
  });
  
  headerDiv.appendChild(titleInput);
  headerDiv.appendChild(deleteButton);
  
  // 关键词容器
  const keywordsContainer = document.createElement('div');
  keywordsContainer.className = 'keywords-container';
  
  // 添加现有关键词
  keywords.forEach(keyword => {
    const keywordElement = createKeywordInput(categoryName, keyword);
    keywordsContainer.appendChild(keywordElement);
  });
  
  // 添加关键词按钮
  const addKeywordButton = document.createElement('button');
  addKeywordButton.className = 'add-keyword-btn';
  addKeywordButton.textContent = '+ 添加关键词';
  addKeywordButton.addEventListener('click', () => {
    const keywordElement = createKeywordInput(categoryName, '');
    keywordsContainer.appendChild(keywordElement);
    // 自动聚焦到新添加的输入框
    const inputField = keywordElement.querySelector('.keyword-input');
    inputField.focus();
  });
  
  categoryDiv.appendChild(headerDiv);
  categoryDiv.appendChild(keywordsContainer);
  categoryDiv.appendChild(addKeywordButton);
  
  return categoryDiv;
}

// 创建关键词输入框元素
function createKeywordInput(categoryName, keyword) {
  const keywordContainer = document.createElement('div');
  keywordContainer.className = 'keyword-input-container';
  
  const input = document.createElement('input');
  input.type = 'text';
  input.className = 'keyword-input';
  input.value = keyword;
  input.setAttribute('data-category', categoryName);
  input.addEventListener('change', updateKeywords);
  
  const removeButton = document.createElement('button');
  removeButton.className = 'remove-keyword-btn';
  removeButton.textContent = '×';
  removeButton.addEventListener('click', () => {
    keywordContainer.remove();
    updateKeywords();
  });
  
  keywordContainer.appendChild(input);
  keywordContainer.appendChild(removeButton);
  
  return keywordContainer;
}

// 更新分类名称
function updateCategoryName(event) {
  const oldName = event.target.closest('.category-item').getAttribute('data-category');
  const newName = event.target.value.trim();
  
  if (!newName) {
    showMessage('分类名称不能为空', 'error');
    event.target.value = oldName;
    return;
  }
  
  if (newName !== oldName && currentCategories[newName]) {
    showMessage('分类名称已存在', 'error');
    event.target.value = oldName;
    return;
  }
  
  // 更新分类名称
  currentCategories[newName] = currentCategories[oldName];
  delete currentCategories[oldName];
  
  // 更新DOM属性
  event.target.closest('.category-item').setAttribute('data-category', newName);
  
  // 更新该分类下所有关键词输入框的data-category属性
  const keywordInputs = event.target.closest('.category-item').querySelectorAll('.keyword-input');
  keywordInputs.forEach(input => {
    input.setAttribute('data-category', newName);
  });
}

// 更新关键词列表
function updateKeywords() {
  // 重新从DOM收集所有关键词
  const categoryItems = document.querySelectorAll('.category-item');
  
  categoryItems.forEach(item => {
    const categoryName = item.getAttribute('data-category');
    const keywordInputs = item.querySelectorAll('.keyword-input');
    const keywords = Array.from(keywordInputs)
      .map(input => input.value.trim())
      .filter(keyword => keyword); // 过滤空字符串
    
    currentCategories[categoryName] = keywords;
  });
}

// 添加新分类
function addNewCategory() {
  // 生成默认的新分类名称
  let newCategoryName = '新分类';
  let counter = 1;
  
  while (currentCategories[newCategoryName]) {
    newCategoryName = `新分类${counter}`;
    counter++;
  }
  
  // 添加新分类
  currentCategories[newCategoryName] = [];
  renderCategories();
  
  // 自动聚焦到新分类的标题输入框
  const newCategoryItem = document.querySelector(`.category-item[data-category="${newCategoryName}"]`);
  if (newCategoryItem) {
    const titleInput = newCategoryItem.querySelector('.category-title-input');
    titleInput.focus();
  }
}

// 保存配置
function saveConfig() {
  // 确保所有更改都已保存
  updateKeywords();
  
  // 保存到Chrome存储
  chrome.storage.local.set({ 'bookmarkCategories': currentCategories }, () => {
    showMessage('配置已成功保存！', 'success');
    
    // 通知background.js配置已更新
    chrome.runtime.sendMessage({ action: 'configUpdated' });
  });
}

// 恢复默认设置
function resetToDefault() {
  if (confirm('确定要恢复默认设置吗？当前配置将会丢失。')) {
    currentCategories = JSON.parse(JSON.stringify(DEFAULT_CATEGORIES));
    renderCategories();
    showMessage('已恢复默认设置', 'success');
  }
}

// 显示消息
function showMessage(message, type = 'info') {
  const messageElement = document.getElementById('message');
  messageElement.textContent = message;
  
  // 移除所有消息类型的class
  messageElement.classList.remove('message-success', 'message-error', 'message-info');
  
  // 添加对应类型的class
  messageElement.classList.add(`message-${type}`);
  
  // 显示消息
  messageElement.style.display = 'block';
  
  // 3秒后自动隐藏消息
  setTimeout(() => {
    messageElement.style.display = 'none';
  }, 3000);
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initConfig);